import Logo from '@/components/logo';
import { useSettings } from '@/store/settingStore';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import { ThemeLayout } from '@/types/enum';
import { HEADER_HEIGHT } from '../config';
import { SvgIcon } from '@/components/icon';
import { NavLink } from 'react-router-dom';

type Props = {
  collapsed: boolean;
  showNavToggle: boolean;
  onToggle: () => void;
};
export default function NavLogo({ collapsed, showNavToggle, onToggle }: Props) {
  const { themeLayout } = useSettings();

  return (
    <div
      style={{ height: `${HEADER_HEIGHT}px` }}
      className="relative flex items-center  justify-center px-4 py-4"
    >
      <div className="flex  items-center ">
        {/* <Logo /> */}
        <NavLink to="/worklayouts/">
          {themeLayout === ThemeLayout.Mini && <SvgIcon icon="ic-logo-two" size={40} />}

          {themeLayout !== ThemeLayout.Mini && <SvgIcon icon="ic-logo-three" size={212} />}
        </NavLink>
      </div>
      {showNavToggle && (
        <div
          onClick={onToggle}
          onKeyDown={onToggle}
          // className="border-border bg-bg-paper absolute right-0 top-7 z-50 hidden h-6 w-6 translate-x-1/2 cursor-pointer select-none items-center justify-center rounded-full border border-dashed text-center text-sm md:flex"
          className="border-border bg-bg-paper absolute -right-1 top-4 z-50 hidden translate-x-1/2 cursor-pointer select-none  md:flex"
        >
          {collapsed ? (
            // <RightOutlined className="text-text-disabled text-xs" />
            <SvgIcon icon="ic-arrow-left" size={70} />
          ) : (
            <SvgIcon icon="ic-arrow-right" size={70} />
            // <LeftOutlined className="text-text-disabled text-xs" />
          )}
        </div>
      )}
    </div>
  );
}
